<template>
  <div id="app">
    <el-container>
      <el-header>
        <div class="header-content">
          <div class="header-left">
            <el-button
              v-if="isMobile"
              @click="sidebarCollapsed = !sidebarCollapsed"
              class="hamburger-btn"
              text
            >
              <el-icon :size="24"><MenuIcon /></el-icon>
            </el-button>
            <h1>南昌旅游路线规划系统</h1>
          </div>
          <div class="header-right">
            <div class="user-menu">
              <el-dropdown v-if="isAuthenticated" @command="handleCommand">
                <span class="user-info">
                  <el-avatar :size="32" :src="currentUser?.avatar">
                    {{ currentUser?.username?.charAt(0).toUpperCase() }}
                  </el-avatar>
                  <span class="username">{{ currentUser?.username }}</span>
                  <el-icon><ArrowDown /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="dashboard">个人空间</el-dropdown-item>
                    <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <div v-else class="auth-buttons">
                <el-button type="text" @click="$router.push('/login')">登录</el-button>
                <el-button type="primary" @click="$router.push('/register')">注册</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-header>
      <el-container>
        <!-- 侧边栏导航 -->
        <el-aside
          v-if="!isMobile"
          :width="sidebarWidth"
          class="sidebar-container"
        >
          <SidebarMenu :collapse="sidebarCollapsed" />
        </el-aside>
        
        <!-- 移动端侧边栏（抽屉） -->
        <transition name="slide-fade">
          <el-aside
            v-if="isMobile && sidebarCollapsed"
            width="240px"
            class="sidebar-container sidebar-mobile-open"
          >
            <SidebarMenu :collapse="false" />
          </el-aside>
        </transition>
        
        <!-- 移动端遮罩层 -->
        <transition name="fade">
          <div
            v-if="isMobile && sidebarCollapsed"
            class="sidebar-overlay"
            @click="sidebarCollapsed = false"
          ></div>
        </transition>
        
        <!-- 主内容区域 -->
        <el-main :class="{ 'with-sidebar': !isMobile && !sidebarCollapsed }">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { computed, onMounted, ref, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ArrowDown, Menu as MenuIcon } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import SidebarMenu from './components/SidebarMenu.vue'

export default {
  name: 'App',
  components: {
    ArrowDown,
    MenuIcon,
    SidebarMenu
  },
  setup() {
    const router = useRouter()
    const store = useStore()
    
    const sidebarCollapsed = ref(false)
    const isMobile = ref(window.innerWidth < 768)

    const isAuthenticated = computed(() => store.getters.isAuthenticated)
    const currentUser = computed(() => store.getters.currentUser)
    
    const sidebarWidth = computed(() => {
      return sidebarCollapsed.value ? '64px' : '240px'
    })

    const handleCommand = (command) => {
      if (command === 'dashboard') {
        router.push('/dashboard')
        if (isMobile.value) {
          sidebarCollapsed.value = false
        }
      } else if (command === 'logout') {
        store.dispatch('logout')
        ElMessage.success('已退出登录')
        router.push('/')
      }
    }
    
    const handleResize = () => {
      isMobile.value = window.innerWidth < 768
      if (!isMobile.value) {
        sidebarCollapsed.value = false
      }
    }

    onMounted(async () => {
      if (store.state.token) {
        await store.dispatch('fetchUserInfo')
      }
      window.addEventListener('resize', handleResize)
    })
    
    onUnmounted(() => {
      window.removeEventListener('resize', handleResize)
    })

    return {
      isAuthenticated,
      currentUser,
      sidebarCollapsed,
      isMobile,
      sidebarWidth,
      handleCommand
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.el-header {
  /* 南昌旅游特色：南昌红到滕王阁金渐变 */
  background: linear-gradient(135deg, #C8102E 0%, #D4AF37 100%);
  color: white;
  padding: 0 30px;
  box-shadow: 0 2px 12px 0 rgba(200, 16, 46, 0.2);
  position: relative;
  overflow: hidden;
}

/* 头部装饰元素 */
.el-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 20s infinite ease-in-out;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-30px, 30px) scale(1.1);
  }
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.hamburger-btn {
  color: white;
  padding: 8px;
}

.hamburger-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.header-content h1 {
  margin: 0;
  color: white;
  font-size: 24px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-menu {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 15px;
  border-radius: 20px;
  transition: all 0.3s;
  background-color: rgba(255, 255, 255, 0.1);
}

.user-info:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.username {
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.auth-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

.auth-buttons .el-button--text {
  color: white;
}

.auth-buttons .el-button--text:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* 侧边栏容器 */
.sidebar-container {
  background-color: #fff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  transition: width 0.3s;
  overflow: hidden;
  position: relative;
  z-index: 100;
}

/* 移动端侧边栏 */
.sidebar-container.sidebar-mobile-open {
  position: fixed;
  left: 0;
  top: 60px;
  height: calc(100vh - 60px);
  width: 240px !important;
  z-index: 1000;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
}

/* 移动端遮罩层 */
.sidebar-overlay {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.el-main {
  padding: 30px;
  min-height: calc(100vh - 60px);
  transition: margin-left 0.3s;
}

.el-main.with-sidebar {
  max-width: calc(100% - 240px);
  margin-left: 0;
}

/* 全局卡片样式优化 */
.el-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
}

.el-card:hover {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12);
}

/* 按钮样式优化 */
.el-button {
  border-radius: 6px;
  font-weight: 500;
}

/* 输入框样式优化 */
.el-input__wrapper {
  border-radius: 6px;
}

/* 表格样式优化 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    padding: 0 15px;
  }
  
  .header-content h1 {
    font-size: 18px;
  }
  
  .header-right {
    gap: 10px;
  }
  
  .auth-buttons {
    gap: 5px;
  }
  
  .auth-buttons .el-button {
    padding: 8px 12px;
    font-size: 14px;
  }
  
  .el-main {
    padding: 15px;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
  
  .sidebar-container {
    width: 0 !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar-container {
    width: 200px !important;
  }
  
  .el-main.with-sidebar {
    max-width: calc(100% - 200px);
  }
}

/* 过渡动画 */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s ease-in;
}

.slide-fade-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-fade-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

.el-message, .el-message__content, .el-message-box, .el-message-box__message, .el-message-box__title, .el-dialog__title, .el-dialog__body {
  -webkit-text-fill-color: initial !important;
  color: #303133 !important;
}

.el-message-box__message p {
  color: #303133 !important;
}

